<template>
    <div>
        <!-- 购物车顶部导航区域 -->
        <nav-comp :back="true" title="订单确认"></nav-comp>
        <!-- 收货地址区域 -->
            <!-- 编辑 重新选择收货地址区域 -->
             <van-contact-card
                v-if="buffer"
                type="edit"
                :name="address.username"
                :tel="address.userphone"
                @click="onEdit"
            />
            <!-- 添加收货地址区域 -->
            <van-contact-card 
                type="add" 
                @click="onAdd" 
                add-text="添加收货信息" 
                v-else
            />
        <!-- 确认订单列表区域 -->
            <van-card
                v-for="item in orderData"
                :key="item.id"
                :num="item.num"
                :price="item.price"
                desc="描述信息"
                :title="item.goodsname"
                :thumb="$pre+item.img"
            />
        <!-- 订单提交导航区域 -->
            <van-submit-bar :price="Number(countMoney*100)" button-text="提交订单" @submit="onSubmit" />
    </div>
</template>

<script>
export default {
    data() {
        return {
            orderData:[],//待确认订单数据
            countMoney:"",//总支付金额
            countNumber:"",//购买商品数量
            buffer:"",//收货地址展示开关
            userUid:"",//用户的uid
            address:{},//用户的默认收货地址数据
        };
    },
    mounted() {
        //1.检测是否登录
        let userUid=this.$api.isLogin()
        if(userUid !=false){
            //2.将用户UID存储
            this.userUid=userUid
            //3.解构获取缓存中的用户待确认订单信息
            let {orderData,countMoney,countNumber} =JSON.parse(localStorage.getItem('orderData'))
            this.orderData = orderData
            this.countMoney = countMoney
            this.countNumber = countNumber
            //4.获取当前用户的收货地址
            this.getUserAddress(userUid)
        }
    },
    methods: {
        //1.跳转到用户收货地址添加页面
        onAdd(){
            this.$router.push('/addressadd')
        },
        //2.提交订单
        onSubmit(){
            // 2.1检测用户是否有收货地址
            if(!this.buffer){
                // 提示添加收货地址
                this.$toast('请先完善您的收货地址！');return
            }
            // 2.2组装提交数据
            let insertData={
                uid:this.userUid,
                countmoney:this.countMoney,
                countnumber:this.countNumber,
                addressid:this.address.id,
                idstr:this.orderData.map(item=>item.id).join(',')
            }
            // 2.3执行提交
            this.$api.reqorderAdd(insertData)
            .then(res=>{
                console.log(res);
                // 添加成功后删除缓存中的待确认订单数据
                localStorage.removeItem('orderData')
                // 跳转到支付页面?
            })
            .catch(err=>console.log(err))
        },
        //3.获取当前用户的收货地址
        getUserAddress(uid){
            this.$api.reqAddressList({uid})
            .then(res=>{
                console.log(res.data)
                //3.1判断用户是否有收货地址
                if(res.data.list==null){
                    this.buffer=false
                }else{
                    this.buffer=true
                    this.address=res.data.list[0]
                }
            })
            .catch(err=>console.log(err))
        },
        //4.编辑用户收货地址
        onEdit(){

        }
    },
};
</script>

<style scoped>
</style>
